<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" id="menu-add" auth="menu:add">
                    <i class="layui-icon layui-icon-add-1"></i>添加
                </button>
            </div>
            <table id="menu-table" class="layui-table" lay-filter="menu-table"></table>
        </div>
    </div>
</div>

<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit" auth="menu:edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" auth="menu:delete">删除</a>
</script>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/common.js?v=5"></script>

<script>

layui.use(['table', 'treetable','laytpl'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var treetable = layui.treetable;
    var laytpl = layui.laytpl;

    // 渲染表格
    layer.load(2);
    treetable.render({
        treeColIndex: 1,
        treeSpid: 0,
        treeIdName: 'authorityId',
        treePidName: 'pid',
        elem: '#menu-table',
        url: '/admin/menu/list', // ?gameArea=100
        page: false,
        cols: [[
            {field: 'id' , title: 'ID' ,width:100},
            {field: 'title', minWidth: 200, title: '权限名称'},
            {field: 'authority', title: '权限标识'},
            {field: 'href', title: '菜单url'},
            {field: 'sort', width: 80, align: 'center', title: '排序号'},
            {field: 'is_menu', width: 80, align: 'center', title: '类型', templet: function (d) {
                    if (d.is_menu == 1) {
                        return '<span class="layui-badge layui-bg-gray">菜单</span>';
                    } else {
                        return '<span class="layui-badge-rim">按钮</span>';
                    }
                }
            },
            {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
        ]],
        done: function () {
            layer.closeAll('loading');
        }
    });

    $('#btn-expand').click(function () {
        treetable.expandAll('#menu-table');
    });

    $('#btn-fold').click(function () {
        treetable.foldAll('#menu-table');
    });

    //监听工具条
    table.on('tool(menu-table)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'del') {
            layer.confirm('确定删除吗?',{icon:3},function(){
                $.post('/admin/menu/'+data.id,{_method:'delete'},function(res){
                    if (res.code===0){
                        layer.msg('success',{icon:6})
                        location.reload();
                    }
                })
            })
        } else if (layEvent === 'edit') {
            layer.open({
                type: 2, // page 层类型
                area: ['100%', '100%'],
                title: '菜单编辑',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                content: "form.html?id="+data.id
            });
        }
    });

    //事件
    $('#menu-add').click(function(){
        layer.open({
            type: 2, // page 层类型
            area: ['100%', '100%'],
            title: '菜单添加',
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            maxmin: true, // 允许全屏最小化
            content: "form.html"
        });

    })
});

</script>
</body>
</html>